<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
        *{
        	margin:0;padding:0;
        }
        li
        {
        	list-style: none;
        }
        .ul img
        {
            width:200px;height: 100px;float: left;
        }
        .img
        {
            width:800px;height:500px;position: relative;top:150px;
        }
        .img img
        {
            width:100%;height:100%;position: absolute;top:0;left:0;
        }
        .des
        {
            position: relative;top:170px;left:30px;
        }

	</style>
</head>
<body>
  
    <div>
        <!-- 小图 -->
    	<ul class="ul">
    		<li>
                <a href="images/fish.jpg" title="鱼"><img src="images/fish.jpg" alt=""></a>      
            </li>
    		<li>
               <a href="images/dangao.jpg" title="蛋糕"><img src="images/dangao.jpg" alt=""></a>      
            </li>
    		<li>
                <a href="images/niunai.jpg" title="牛奶"><img src="images/niunai.jpg" alt=""></a>      
            </li>
    		<li>
                <a href="images/xia.jpg" title="虾"><img src="images/xia.jpg" alt=""></a>      
            </li>
    	</ul>

        <!-- 大图 -->
        <div class="img">
            <img src="images/fish.jpg" alt="">
        </div>

        <!-- 文字描述 -->
        <div class="des">鱼</div>
    </div>
	
</body>
</html>
<script type="text/javascript">
	$(function(){
		//需要做三件事
        //1、改变大图
        //2、改变文字说明
        //3、阻止a标签的默认行为
        
        //给每个a注册点击事件
        $('.ul a').click(function(){
            //获取大图片的地址
            var href = $(this).attr('href');
            //设置属性值
            $('.img img').attr('src',href);

            
            //获取title值
            var title = $(this).attr('title');
            console.log(title);
            //设置属性值
            $('.des').text(title);

            //阻止默认行为
            return false;
        });

	});

</script>